import { Component } from 'react';

import { RadioField, CheckboxField, SelectField, Rate,Boxs,Toast,Slot } from 'saltui';
const { HBox, Box } = Boxs;
import FillInBlanks from 'components/fillInBlanks';
import RateNew from 'components/rate';
import CustomCheck from 'components/check';
import MulscaleRate from 'components/mulscaleRate';
import './answer.less';
import Upload from 'components/upload';
import DirectionBottom from 'salt-icon/lib/DirectionBottom';
export default class PageHome extends Component {
  /*handleChangePic(rows) {
    this.setState({
      addques: rows,
    })
  }*/


  handleTextChange(name, newValue, no) {
    var rows = this.props.todo;
    rows[no][name] = newValue;
    this.props.onAdd(rows);
    // this.setState({
    //   [name]: newValue,
    // });
    // if (newValue.length > 5) {
    //   this.setState({
    //     errMsg: '最多输入5个字',
    //   });
    // } else {
    //   this.setState({
    //     errMsg: null,
    //   });
    // }
  }

  constructor(props) {
    super(props);
    var topic = props.topic;
    var data = { list: [],answer:[],imgList:[] ,id:''};
    var canAnswer = props.canAnswer;
    var context = document.getElementById("context").value;
    var value = [];
    this.state = {
      data: data,
      quesType:this.props.quesType,
      topic: topic,
      status: canAnswer,
      imgIds:"",
      imgList:[],
      urlPrev: context + '/dingisv/api/common/viewImage?fid=',
      loading:false,
      value, // 下拉选择框选中的值
      confirmedValue: value // 下拉选择框上次选中的值（取消选择时恢复用）
    };
    this.handleTextChange = this.handleTextChange.bind(this);

  }

  componentDidMount() {
    let t = this;
    var item = this.state.topic;
    var status = this.state.status;
    var returnData = this.props.data;
    var checkIsQuired = this.props.checkIsQuired;
    var data = {};
    var topicType = item.topicType;
    var topicItem = {};
    var answerSelectArray = [];
    topicItem.topicNameTxt = item.topicNameTxt;
    topicItem.pageNo = item.page;
    topicItem.topicScore = item.settingMap?item.settingMap.topicScore:0;
    topicItem.name = item.topicName;
    //防止xss攻击
    if(/script|href|click/.test(topicItem.name)){
      topicItem.name = item.topicNameTxt;
    }
    var token = document.getElementById("token").value;
    if (topicType == 'sinselect' || topicType == 'trueOrFalse') {//单选
      topicItem.topicNo = item.topicNo;//题号
      topicItem.required = item.settingMap.willAnswer;
      topicItem.ezQuABC = item.settingMap.ezQuABC;
      // topicItem.topicNameTxt = item.topicNameTxt;
      topicItem.isAnswer = 0;
      
      topicItem.id = item.id;
      // $('#topic' + item.id).html();
      topicItem.titleName = item.topicNo+"."+item.topicName;
      topicItem.topicType = item.topicType;
      topicItem.readOnly = status;//判断是否只读,0可选，1不可选
      var ext = '';
      var list = item.list;
      var radioList = [];
      var answerContent = '';
      for (var j = 0; j < list.length; j++) {
        var radioItem = {};
        var radio = list[j];
        var answer = radio.answer;
        if (answer.id != null) { //判断选中状态
          if(t.props.quesType != 'questionnaireExam'){
            radioItem.checked = true;
          }
          answerContent = radio.id;
          topicItem.isAnswer = 1;
        } else {
          radioItem.checked = false;
        }
        if (status == '0') { //判断是否能选择,0可选，1不可选
          radioItem.disable = false;
        } else {
          radioItem.disable = true;
        }
        var fileId = radio.mapSet.optionImg;
        var url = '';
        if (fileId) {
          url = this.state.urlPrev + fileId+'&token='+token;
        }
        radioItem.value = radio.id;
        if(ext == ''){
          if(answer.answerExt!=null){
            ext +=answer.answerExt;
          }
        }else{
          if(answer.answerExt!=null){
            ext +=','+answer.answerExt;
          }
        }
        radioItem.selectNum = radio.selectNum;
        radioItem.ticketPercent = radio.ticketPercent;
        radioItem.optionBlankWill = radio.mapSet.optionBlankWill;
        radioItem.isRightAnswer = radio.mapSet.isRightAnswer == "1" ? true : false;
        radioItem.letter = radio.letter;
        radioItem.url = url;
        radioItem.optionBlank = radio.mapSet.optionBlank;
        radioItem.radioName = radio.name;
        // radioItem.answerExt = answer.answerExt==null?(radio.answerExt==''?'':radio.answerExt):answer.answerExt;
        radioItem.answerExt = answer.answerExt==null ? '' : answer.answerExt;
        radioList.push(radioItem);
      }
      topicItem.list = radioList;
      topicItem.answer = answerContent;
      topicItem.answerExt = ext;
      topicItem.fraction = 0;
      data = topicItem;
      returnData.push(data);

      // checkIsQuired.push({
      //   'id':item.id,
      //   'required':topicItem.required,
      //   'isAnswer':'0',
      //   'answer':'',
      //   'name':topicItem.name
      // });
    } else if (topicType == 'multiselect') { //多选
      topicItem.topicNo = item.topicNo;//题号
      // topicItem.topicNameTxt = item.topicNameTxt;
      topicItem.required = item.settingMap.willAnswer;
      topicItem.ezQuABC = item.settingMap.ezQuABC;
      topicItem.isAnswer = 0;
      //topicItem.name = item.topicNameTxt;
      topicItem.topicSetting = item.topicSetting;
      topicItem.id = item.id;
      // $('#topic' + item.id).html(item.topicNo+"."+item.topicName);
      topicItem.titleName = item.topicNo+"."+item.topicName;
      topicItem.list = item.list;
      topicItem.topicType = item.topicType;
      topicItem.readOnly = status;//判断是否只读,0可选，1不可选
      var ext = '';
      var list = item.list;
      var checkboxList = [];
      var answerContent = '';
      for (var j = 0; j < list.length; j++) {
        var radioItem = {};
        var radio = list[j];
        var answer = radio.answer;
        radioItem.answerExt = answer.answerExt == null ? '' : answer.answerExt;
        if (answer.id != null) { //判断选中状态
          if(t.props.quesType != 'questionnaireExam'){
            radioItem.checked = true;
          }
          answerContent += radio.id + ",";
          topicItem.isAnswer = 1;
        } else {
          radioItem.checked = false;
        }
        if(status == '0'){ //判断是否能选择,0可选，1不可选
           radioItem.disable = false;
        }else{
           radioItem.disable = true;
        }
        var fileId = radio.mapSet.optionImg;
        var url = '';
        if (fileId) {
          url = this.state.urlPrev + fileId+'&token='+token;
        }
        radioItem.selectNum = radio.selectNum;
        radioItem.ticketPercent = radio.ticketPercent;
        radioItem.value = radio.id;
        radioItem.optionBlankWill = radio.mapSet.optionBlankWill;
        radioItem.isRightAnswer = radio.mapSet.isRightAnswer == "1" ? true : false;
        radioItem.letter = radio.letter;
        radioItem.url = url;
        radioItem.radioName = radio.name;
        radioItem.optionBlank = radio.mapSet.optionBlank
        checkboxList.push(radioItem);
      }
      if (answerContent != '') {
        answerContent = answerContent.substring(0, answerContent.length - 1);
      }
      topicItem.list = checkboxList;
      topicItem.answer = answerContent;
      topicItem.fraction = 0;
      data = topicItem;
      returnData.push(data);
    } else if (topicType == 'answer' || topicType == 'shortAnswer') { //问答
      // topicItem.topicNameTxt = item.topicNameTxt;
      topicItem.topicNo = item.topicNo;//题号
      topicItem.required = item.settingMap.willAnswer;
      topicItem.isAnswer = 0;
      //topicItem.name = item.topicNameTxt;
      topicItem.id = item.id;
      // $('#topic' + item.id).html(item.topicNo+"."+item.topicName);
      topicItem.titleName = item.topicNo+"."+item.topicName;
      topicItem.topicType = item.topicType;
      topicItem.list = item.list[0];
      topicItem.readOnly = status;//判断是否只读,0可选，1不可选
      var textarea = item.list[0];
      var answer = textarea.answer;
      var answerContent = '';
      answerContent = answer.answer;
      // $('#content' + item.id).val(answerContent);
      if(answerContent !=null&&answerContent!=''){
        //topicItem.answer=answerContent;
        topicItem.isAnswer = 1;
        // $('#content' + item.id).val(answerContent);
      }else{
        topicItem.answer = "";
        topicItem.isAnswer = 0;
      }
      
      topicItem.answerExt = '';
      topicItem.optionId = textarea.id;
      topicItem.fraction = 0;
      data = topicItem;
      returnData.push(data);

      
    } else if (topicType == 'check') { //下拉选择
      // topicItem.topicNameTxt = item.topicNameTxt;
      topicItem.topicNo = item.topicNo;//题号
      topicItem.required = item.settingMap.willAnswer;
      topicItem.isAnswer = 0;
      //topicItem.name = item.topicNameTxt;
      topicItem.id = item.id;
      // $('#topic' + item.id).html(item.topicNo+"."+item.topicName);
      topicItem.titleName = item.topicNo+"."+item.topicName;
      topicItem.topicType = item.topicType;
      topicItem.readOnly = status;//判断是否只读,0可选，1不可选
      var list = item.list;
      var selectList = [];
      var answerContent = '';
      var answerSelect = {};
      for (var j = 0; j < list.length; j++) {
        var radioItem = {};
        if(j==0){
          radioItem.value = '';
          radioItem.text = '请选择';
          selectList.push(radioItem);
          radioItem = {};
        }
        var radio = list[j];
        var answer = radio.answer;

        if (answer.id != null) {
          answerContent = answer.answer;
          answerSelect.value = answer.answer;
          answerSelect.text = radio.name;
          topicItem.isAnswer = 1;
        }
        radioItem.value = radio.id;
        radioItem.text = radio.name;
        // radioItem.content = '123';
        selectList.push(radioItem);
      }
      //给默认选项赋值为选中状态
      if(topicItem.isAnswer==0){
        for(var k = 0; k < list.length; k++){
          var answerList = list[k];
          var flag = answerList.mapSet.optionDefault;
          if(flag=='1'){
            answerSelect = selectList[k+1];
            topicItem.isAnswer = 1;
            answerContent = answerSelect.value;
          }
        }
      }
      var selectListArray = [];
      selectListArray.push(selectList);
      topicItem.list = selectListArray;
      topicItem.answer = answerContent;
      if (!answerSelect.value) {
          answerSelect = selectList[0];
        
      }
      if(item.isCheck == -1){
        answerSelect = selectList[0];
      }
      topicItem.answerSelect = answerSelect;
      answerSelectArray.push(answerSelect);
      topicItem.answerExt = '';
      data = topicItem;
      returnData.push(data);

    } else if (topicType == 'fillInBlanks') { //填空
      // topicItem.topicNameTxt = item.topicNameTxt;
      topicItem.topicNo = item.topicNo;//题号
      topicItem.required = item.settingMap.willAnswer;
      topicItem.isAnswer = 0;
      //topicItem.name = item.topicNameTxt;
      topicItem.id = item.id;
      // $('#topic' + item.id).html(item.topicNo+"."+item.topicName);
      topicItem.titleName = item.topicNo+"."+item.topicName;
      topicItem.topicType = item.topicType;
      topicItem.readOnly = status;//判断是否只读,0可选，1不可选
      var list = item.list;
      var fillList = [];
      var answerContent = [];
      for (var j = 0; j < list.length; j++) {
        var radioItem = {};
        var radio = list[j];
        var answer = radio.answer;
        radioItem.optionRequired = radio.mapSet.optionRequired;
        if(topicItem.required == 1 && t.props.quesType == 'questionnaireExam') radioItem.optionRequired = 1;
        radioItem.score = radio.mapSet.score;
        radioItem.fraction = 0;
        radioItem.rightAnswer = radio.mapSet.answer;
        if (answer.id != null) {
          // answerContent.push({answer:answer.answer,id:radio.id});
          //radioItem.value = answer.answer;
          topicItem.isAnswer = 1;
        } else {
          // answerContent.push({answer:'',id:radio.id});
          radioItem.value = '';
        }
        radioItem.optionSetting = radio.optionSetting;
        radioItem.name = radio.name;
        radioItem.id = radio.id;
        // radioItem.content = '123';
        fillList.push(radioItem);
      }
      topicItem.answer = fillList;
      topicItem.answerExt = '';
      topicItem.fraction = 0;
      
      //topicItem.list = fillList;

      data = topicItem;
      returnData.push(data);

    } else if (topicType == 'scale') { //矩阵
      // topicItem.topicNameTxt = item.topicNameTxt;
      topicItem.topicNo = item.topicNo;//题号
      topicItem.required = item.settingMap.willAnswer;
      topicItem.isAnswer = 0;
      topicItem.name = item.topicNameTxt;
      topicItem.id = item.id;
      // $('#topic' + item.id).html(item.topicNo+"."+item.topicName);
      topicItem.titleName = item.topicNo+"."+item.topicName;
      topicItem.topicType = item.topicType;

      var list = item.list;
      var scaleList = [];
      var scaleNameList = [];
      var answerContent = "";
      var itemNo = 0;
      var answerList ={};
      var alllist=[];
      for (var j = 0; j < list.length; j++) {
        var radioItem = {};
        var radio = list[j];
        var answer = radio.answer;
        answerList.type = item.settingMap.optionScale;
        if (answer.id != null) {
          // answerContent.push({answer:answer.answer,id:radio.id});
          answerContent = answer.answer;
          itemNo = j + 1;
          topicItem.isAnswer = 1;
          answerList.itemNo = itemNo;
        }

        radioItem.name = radio.name;
        radioItem.id = radio.id;
        //scaleNameList.push(radio.name);
        scaleNameList.push(radio.name);
        // radioItem.content = '123';
        scaleList.push(radioItem);
      }
      var keyNo = t.props.keyNo;
      answerList.keyNo = keyNo;
      answerList.list =scaleList;
      answerList.nameList = scaleNameList;
      answerList.status = status;
      alllist.push(answerList);
      topicItem.status = status;
      topicItem.list = alllist;
      topicItem.answer = answerContent;
      topicItem.itemNo = itemNo;
      topicItem.answerExt = '';
      data = topicItem;
      returnData.push(data);
    } else if (topicType == 'mulscale') { //矩阵量表
      // topicItem.topicNameTxt = item.topicNameTxt;
      topicItem.topicNo = item.topicNo;//题号
      topicItem.required = item.settingMap.willAnswer;
      //topicItem.name = item.topicNameTxt;
      topicItem.id = item.id;
      // $('#topic' + item.id).html(item.topicNo+"."+item.topicName);
      topicItem.titleName = item.topicNo+"."+item.topicName;
      topicItem.topicType = item.topicType;
      topicItem.type = item.settingMap.optionScale;
      topicItem.readOnly=status;
      var list = item.list;
      var mulScaleList = [];
      var answerContent = "";
      var itemNo = 0;
      for (var j = 0; j < list.length; j++) {
        //var scaleList = [];
        var scaleItem = {};
        var scale = list[j];

        var answer = scale.answer;
        scaleItem.type = item.settingMap.optionScale;
        var keyNo = t.props.keyNo;
        scaleItem.keyNo = keyNo;
        scaleItem.isAnswer = 0;
        scaleItem.name = scale.name;
        scaleItem.id = scale.id;
        scaleItem.list = scale.list;
        scaleItem.value = '';
        scaleItem.status = status;//判断是否只读,0可选，1不可选
        if (answer.id != null) {
          scaleItem.value = answer.answer;
          scaleItem.itemNo = parseInt(answer.answer)+1;
          answerContent = answer.answer;
          itemNo = parseInt(answerContent) + 1;
          scaleItem.isAnswer = 1;
        }
        mulScaleList.push(scaleItem);
      }

      topicItem.answer = mulScaleList;

      data = topicItem;
      returnData.push(data);
    } else if (topicType == 'field') { //附件
      // topicItem.topicNameTxt = item.topicNameTxt;
      topicItem.fraction = 0;
      topicItem.topicNo = item.topicNo;//题号
      topicItem.status = status;
      topicItem.required = item.settingMap.willAnswer;
      topicItem.isAnswer = 0;
      //topicItem.name = item.topicNameTxt;
      topicItem.id = item.id;
      // $('#topic' + item.id).html(item.topicNo+"."+item.topicName);
      topicItem.titleName = item.topicNo+"."+item.topicName;
      topicItem.topicType = item.topicType;
      //单个文件上传不超过MB
      topicItem.maxMb = item.settingMap.fieldMaxM;
      //最大上传个数
      topicItem.limitNo = item.settingMap.fieldMaxNum;
      //总文件最大不超过MB
      topicItem.fileAllMb = item.settingMap.fieldAllM;
      topicItem.extensions = item.settingMap.extensions;
      if(item.settingMap.extensions==null || item.settingMap.extensions==""){
        topicItem.status = "1";
      }
      var list = item.list;
      for (var j = 0; j < list.length; j++) {
        var file = list[j];
        topicItem.optionId = file.id;
        if(file.answer.answer != null&&file.answer.answer != ""){
          topicItem.attachment = JSON.parse(file.answer.attachment);
          topicItem.answerIds = file.answer.answer;
          this.setState({
           // imgList:JSON.parse(file.answer.attachment)
          })
          topicItem.isAnswer = 1;
        }else{
          topicItem.attachment = [];
          topicItem.answerIds = "";
        }
        topicItem.topicId = file.topicId;
      }
      data = topicItem;
      returnData.push(data);
    }else if(topicType=='illustrate'){
      topicItem.topicNameTxt = item.topicNameTxt;
      topicItem.topicType = item.topicType;
      topicItem.topicName = item.topicName;
      //topicItem.name = item.topicNameTxt;
      data = topicItem;
      returnData.push(data);
    }
    this.setState({
      data: data,
      loading:true,
      confirmedValue : answerSelectArray
    },function(){
      if (topicType == 'answer' || topicType == 'shortAnswer') {
        //监听文本域输入1
        let keyNo = t.props.keyNo;
        $('#content' + item.id).keyup(function(){
            let oldValue = t.props.data[keyNo].answer;
            let value = $(this).val();
            if(isEmojiCharacter(value)){
              Toast.show({
                type: 'error',
                content: '不能输入表情',
                onHide: function () {}
              });
              $(this).val(oldValue);
              return false;
            }  
            t.answerInputKeyup(keyNo, value, topicType);
        });
        t.answerInputKeyup(keyNo, $('#content' + item.id).val(), topicType);
      }
      $(".dd-ques-title").find(".t-text-field-input").click(function(e){
        e.stopPropagation();
        e.preventDefault();
      });
    });
    this.props.onChange(returnData);
  }

  // 单项填空事件
  answerInputKeyup(keyNo, value, topicType) {
    let t = this;
    if(value == ''){
      t.props.data[keyNo].isAnswer = 0;
    }else{
      t.props.data[keyNo].isAnswer = 1;
    }
    let fraction = 0;
    if(topicType == 'answer') {
      if(value == t.state.topic.settingMap.answer) fraction = t.state.topic.settingMap.topicScore;
    }
    t.props.data[keyNo].fraction = fraction;
    t.props.data[keyNo].answer = value;
    t.props.onChange(t.props.data);
  }

  handleAdd(e) {
    e.preventDefault();
    var Dom = ReactDOM.findDOMNode(this.refs.addnew);
    let t = this;
  }

  handleChangeQues(e) {
    var moveIndex = e.target.getAttribute('data-key');
    moveIndex = parseInt(moveIndex);
  }

  onInputChange(num,type,value){
    let t = this;
    var val = value.target.value;
    if(isEmojiCharacter(val)){
      Toast.show({
        type: 'error',
        content: '不能输入表情',
        onHide: function () {}
      });
      return false;
    }
    var data = t.state.data;
    if(type=="sinselect"){
      data.answerExt = val;
      data.list[num].answerExt = val;
    }else if(type=="multiselect"){
      data.list[num].answerExt = val;
    }
    this.setState({
      data: data
    });
    t.props.onChange(t.props.data);
  }


  //type2为问答
  handleChangePic(type, no, rows) {
    var todos = this.state.todos;
    // if(type=='2'){
    //   todos[no]['content'] = rows
    //   this.setState({
    //     todos:todos,
    //   })
    // }else{
    todos[no]['options'] = rows;
    this.setState({
      todos: todos,
    })
    // }

  }

  click() {
  }

  //下拉选择
  // onSelect(value) {
  //     alert(JSON.stringify(value));
  //     let t = this;
  //     var keyNo = t.props.keyNo;
  //     var data = t.state.data;
  //     data.answerSelect = value;
  //     this.setState({
  //       data: data
  //     });
  //     t.props.data[keyNo].answer = value.value;
  //   if(value.value != ''){
  //     t.props.data[keyNo].isAnswer = 1;
  //   }else{
  //     t.props.data[keyNo].isAnswer = 0;
  //   }
  //   t.props.onChange(t.props.data);
  // }

  // 弹出下拉选择框
  showSlot() {
    this.refs.slot.show();
  }

  // 确认下拉框选中项
  handleConfirm(value) {
    var selectValue = value[0];
    let t = this;
    var keyNo = t.props.keyNo;
    var data = t.state.data;
    data.answerSelect = selectValue;
    this.setState({
      data: data,
      confirmedValue: value,
      value,
    });
    t.props.data[keyNo].answer = selectValue.value;
    if(selectValue.value != ''){
      t.props.data[keyNo].isAnswer = 1;
    }else{
      t.props.data[keyNo].isAnswer = 0;
    }
    t.props.onChange(t.props.data);
  }

  // 改变下拉框选中项
  handleChange(value) {
    this.setState({
      value,
    });
  }

  // 取消操作时恢复上次下拉框选中项
  handleCancel() {
    this.setState({
      value: this.state.confirmedValue,
    });
  }

  //填空题
  onChangeFill(value) {
    // var isAnswer = 0;
    // for (var i = 0; i < value.length; i++) {
    //   var valueTxt = value[i].value;
    //   if (valueTxt != '') {
    //     isAnswer += 1;
    //   }
    // }
    // if (isAnswer < value.length) {
    //   this.props.data[keyNo].isAnswer = 0;
    // } else {
    //   this.props.data[keyNo].isAnswer = 1;
    // }    
    let fraction = 0;
    if(this.props.quesType == 'questionnaireExam'){
      for(let i=0; i < value.length; i++){
        if(value[i].value == value[i].rightAnswer) {
          value[i].fraction = value[i].score;
          fraction += parseFloat(value[i].score);
        }
      }
    }
    var keyNo = this.props.keyNo;
    this.props.data[keyNo].answer = value;
    this.props.data[keyNo].fraction = fraction;
    this.props.onChange(this.props.data);
  }
  //上传附件
   uploadFile(img){
    var keyNo = this.props.keyNo;
    var list = this.props.data[keyNo].list;
    var imgIds = "";
    img.map(function(item,index){
      if(index==0){
        imgIds += item.id;
      }else{
        imgIds += "|"+item.id;
      }
     
    });
    if(imgIds.length>=1){
      this.props.data[keyNo].isAnswer = 1;
    }else{
      this.props.data[keyNo].isAnswer = 0;
    }
    this.setState({
      imgList:img
    });
    this.props.data[keyNo].answerIds = imgIds;
    this.props.data[keyNo].attachment = img;
    this.props.onChange(this.props.data);
  }

  //矩阵评分
  changeScale(value) {
    var keyNo = this.props.keyNo;
    var list = this.props.data[keyNo].list;
    this.props.data[keyNo].answer = list[0].list[value - 1].id;
    this.props.data[keyNo].list[0].itemNo = parseInt(value);
    this.props.data[keyNo].isAnswer = 1;
    this.props.onChange(this.props.data);
  }

  //矩阵变量
  changeMulScale(no,value){
    var keyNo = this.props.keyNo;
    var list = this.props.data[keyNo].answer[no].list;
    this.props.data[keyNo].answer[no].value = list[value - 1].optionOrder;
    this.props.data[keyNo].answer[no].itemNo = parseInt(list[value - 1].optionOrder)+1;
    this.props.data[keyNo].answer[no].isAnswer = 1;
    this.setState({
      data:this.props.data[keyNo]
    });
    this.props.onChange(this.props.data);
  }

  customRadioChange(value, fraction){
    var keyNo = this.props.keyNo;
    this.props.data[keyNo].answer = value;
    this.props.data[keyNo].isAnswer = 1;
    this.props.data[keyNo].fraction = fraction;
    this.props.onChange(this.props.data);
  }

  customCheckChange(value, fraction){
    let t = this;
    var keyNo = t.props.keyNo;
    var answer = '';
    for (var i = 0; i < value.length; i++) {
      answer += value[i].value + ",";
    }
    if (answer != '') {
      answer = answer.substring(0, answer.length - 1);
    }
    t.props.data[keyNo].answer = answer;
    t.props.data[keyNo].isAnswer = 1;
    t.props.data[keyNo].fraction = fraction;
    t.props.onChange(t.props.data);
  }

  render() {
    const t = this;
    let display = {display:"none"};

    // const radioFieldProps = {
    //   onChange(value, index, data) {
    //     var keyNo = t.props.keyNo;
    //     t.props.data[keyNo].answer = value;
    //     t.props.data[keyNo].isAnswer = 1;
    //     t.props.onChange(t.props.data);
    //     //console.log(value, index, data);
    //   },
    //   groupListArgument: {
    //     lineIndent: 15,
    //     itemIndent: 15,
    //   },
    //   groupListFlag: false,
    //   className:"dd-ques-title",
    //   iconPosition: 'left',
    // };

    // const CheckboxFieldProps = {
    //   onChange(value) {
    //     var keyNo = t.props.keyNo;
    //     var answer = '';
    //     for (var i = 0; i < value.length; i++) {
    //       answer += value[i].value + ",";
    //     }
    //     if (answer != '') {
    //       answer = answer.substring(0, answer.length - 1);
    //     }
    //     t.props.data[keyNo].answer = answer;
    //     t.props.data[keyNo].isAnswer = 1;
    //     t.props.onChange(t.props.data);
    //     //console.log(value, index, data);
    //   },
    //   groupListArgument: {
    //     lineIndent: 15,
    //     itemIndent: 15,
    //   },
    //   groupListFlag: false,
    //   className:"dd-ques-title",
    //   iconPosition: 'left',
    //   mode: 'list',
    // };

    // var data = this.state.data;
    // if(data.topicType == 'sinselect'){
    //   var list = data.list;
    //   for(var i=0; i<list.length; i++){
    //     var url = list[i].url;
    //     list[i].content = (
    //       <HBox vAlign="top" className="t-FS14 t-FC3">
    //         <Box className="t-PL10">
    //           <Box className="t-FS16">
    //             <span className={this.state.data.ezQuABC=="1"?"":"t-DN"}>{list[i].letter}、</span>
    //             <span>{list[i].radioName}</span>
    //             {list[i].optionBlank =='0' ? '':
    //               <input maxLength='30' onChange={this.onInputChange.bind(this,i,'sinselect')} style={{ width: "auto", textAlign: "left"}} disabled={this.state.status=='1'?true:false} value ={list[i].answerExt} className="t-text-field-input  dd-bottom-border" type="text" />
    //             }
    //           </Box>
    //           {url == null || url == '' ? '':
    //             <img style={{height:"100",marginTop: "10px"}} src={url} />
    //           }
    //           {this.state.quesType == 'questionnaireSurvey' ? '':
    //             <HBox>
    //               <Box className="t-FCorange t-MR4">{list[i].selectNum}票</Box>
    //               <Box className="t-FCddfontblue-60">({list[i].ticketPercent == null ? '0%' : list[i].ticketPercent})</Box>
    //             </HBox>
    //           }
    //         </Box>          
    //       </HBox>);
    //   }
    // }
    // if(data.topicType == "multiselect"){
    //   var list = data.list;
    //   for(var i=0; i<list.length; i++){
    //     var url = list[i].url;
    //     list[i].content = (
    //       <HBox vAlign="top" className="t-FS14 t-FC3">
    //         <Box className="t-PL10">
    //           <Box className="t-PB4 t-FS16">
    //             <span className={this.state.data.ezQuABC=="1"?"":"t-DN"}>{list[i].letter}、</span>
    //             <span>{list[i].radioName} </span>
    //             {list[i].optionBlank =='0' ? '':
    //               <input maxLength='30' onChange={this.onInputChange.bind(this,i,'multiselect')} style={{ width: "auto", textAlign: "left"}} disabled={this.state.status=='1'?true:false} value ={list[i].answerExt} className="t-text-field-input dd-bottom-border" type="text" />
    //             }
    //           </Box>
    //           {url == null || url == '' ? '':
    //             <img style={{height:"100",marginTop: "10px"}} src={url} />
    //           }
    //           {this.state.quesType == 'questionnaireSurvey' ? '':
    //             <HBox>
    //               <Box className="t-FCorange t-MR4">{list[i].selectNum}票</Box>
    //               <Box className="t-FCddfontblue-60">({list[i].ticketPercent == null ? '0%' : list[i].ticketPercent})</Box>
    //             </HBox>
    //           }
    //         </Box>          
    //       </HBox>);
    //   }
    // }
    let quesType = this.props.quesType;
    let topicType = this.state.data.topicType;
    let topicTypeName = '【' + this.state.data.topicScore + '分】';
    if (quesType != 'questionnaireExam'){
      switch (topicType){
        case 'sinselect': 
          if(quesType == 'questionnaireSurvey') topicTypeName = '【普通单选】';
          else topicTypeName = '【投票单选】';
          break;
        case 'multiselect': 
          if(quesType == 'questionnaireSurvey') topicTypeName = '【普通多选】';
          else topicTypeName = '【投票多选】';
          break;
        case 'answer': topicTypeName = '【单项填空】';break;
        case 'check': topicTypeName = '【下拉框】';break;
        case 'fillInBlanks': topicTypeName = '【多项填空】';break;
        case 'field': topicTypeName = '【上传附件】';break;
        case 'scale': topicTypeName = '【量表】';break;
        case 'mulscale': topicTypeName = '【矩阵量表】';break;
      }
    }

    return (
      <div>
        {this.state.data.topicType == 'sinselect' || this.state.data.topicType == 'trueOrFalse' ?
            <div className="t-PB18 t-PR">
              <Box className={this.state.data.required == '1'?"t-FC3 t-FS16 t-PB12 dd-required" : "t-FC3 t-FS16 t-PB12"}>
                <HBox >
                  <b>{this.props.keyNo+1}. </b>
                  <b dangerouslySetInnerHTML={{__html:this.state.data.name}}></b>
                  <span style={{alignSelf: "flex-end"}} className="t-FCddfontblue-40">{topicTypeName}</span>
                </HBox>
              </Box>
              <CustomCheck 
                type='radio'
                data={this.state.data}
                readOnly={this.state.data.readOnly == '1' ? true : false}
                quesType={this.props.quesType}
                onInputChange={(index,value)=>{this.onInputChange(index,'sinselect',value);}}
                onChange={(value, fraction)=>{this.customRadioChange(value, fraction);}}
              />
              {/* <RadioField  data={this.state.data.list} {...radioFieldProps}/> */}
            </div>
          : this.state.data.topicType == 'multiselect' ?
            <div className="t-PB18 t-PR">
              <Box className={this.state.data.required == '1'?"t-FC3 t-FS16 t-PB12 dd-required" : "t-FC3 t-FS16 t-PB12"}>
                <HBox >
                    <b>{this.props.keyNo+1}. </b>
                    <b dangerouslySetInnerHTML={{__html:this.state.data.name}}></b>
                    <span style={{alignSelf: "flex-end"}} className="t-FCddfontblue-40">{topicTypeName}</span>
                  </HBox>
              </Box>
              <CustomCheck 
                type='check'
                data={this.state.data}
                readOnly={this.state.data.readOnly == '1' ? true : false}
                quesType={this.props.quesType}
                onInputChange={(index,value)=>{this.onInputChange(index,'multiselect',value);}}
                onChange={(value, fraction)=>{this.customCheckChange(value, fraction);}}
              />
              {/* <CheckboxField data={this.state.data.list} {...CheckboxFieldProps} /> */}
            </div>
            : this.state.data.topicType == 'answer' || this.state.data.topicType == 'shortAnswer' ?
              <div className="t-PB18 t-PR">
                <Box className={this.state.data.required == '1'?"t-FC3 t-FS16 t-PB12 dd-required" : "t-FC3 t-FS16 t-PB12"}>
                  <HBox >
                    <b>{this.props.keyNo+1}. </b>
                    <b dangerouslySetInnerHTML={{__html:this.state.data.name}}></b>
                    <span style={{alignSelf: "flex-end"}} className="t-FCddfontblue-40">{topicTypeName}</span>
                  </HBox>
                </Box>
                <Box className="t-PB12">
                  <textarea className="t-P10 t-W100 dd-border t-R4" placeholder={this.state.data.readOnly == '1' ? "" : "请输入"} rows="3" maxLength="200" readOnly={this.state.data.readOnly == '1' ? true : false}  defaultValue={this.state.data.answer} id={'content' + this.state.data.id} />
                </Box>
                </div>
              : this.state.data.topicType == 'check' ?
                <div className="t-PB18 t-PR">
                  <Box className={this.state.data.required == '1'?"t-FC3 t-FS16 t-PB12 dd-required" : "t-FC3 t-FS16 t-PB12"}>
                    <HBox >
                      <b>{this.props.keyNo+1}. </b>
                      <b dangerouslySetInnerHTML={{__html:this.state.data.name}}></b>
                      <span style={{alignSelf: "flex-end"}} className="t-FCddfontblue-40">{topicTypeName}</span>
                    </HBox>
                  </Box>
                  {/* <SelectField readOnly={this.state.data.readOnly == '1' ? true : false} label="" options={this.state.data.list} onSelect={t.onSelect.bind(t)} value={this.state.data.answerSelect} /> */}
                  <HBox vAlign="center" onClick={this.showSlot.bind(t)} className="t-R4 dd-border t-LH44 t-H44 t-MB16">
                    <Box flex={1} className="t-PL10 t-FS14 t-FCddfontblue-60 t-H44">{this.state.confirmedValue[0].text}</Box>
                    <Box><DirectionBottom className="t-MR10 t-ML10 t-MT18" fill="rgba(31,56,88,.3)" width="20px"/></Box>
                  </HBox>
                  <Slot
                    ref="slot"
                    data={this.state.data.list}
                    value={this.state.value}
                    onConfirm={this.handleConfirm.bind(t)}
                    onChange={this.handleChange.bind(t)}
                    onCancel={this.handleCancel.bind(t)}
                  />
                </div>
                : this.state.data.topicType == 'fillInBlanks' ?
                  <div className="t-PB18 t-PR">
                    <Box className={this.state.data.required == '1'?"t-FC3 t-FS16 t-PB12 dd-required" : "t-FC3 t-FS16 t-PB12"}>
                      <HBox >
                        <b>{this.props.keyNo+1}. </b>
                        <b dangerouslySetInnerHTML={{__html:this.state.data.name}}></b>
                        <span style={{alignSelf: "flex-end"}} className="t-FCddfontblue-40">{topicTypeName}</span>
                      </HBox>
                    </Box>
                    <FillInBlanks readOnly={this.state.data.readOnly} required={this.state.data.required} keyNo={this.state.data.keyNo} value={this.state.data.answer} onChangeFill={this.onChangeFill.bind(this)} />
                  </div>
                  : this.state.data.topicType == 'field' ?
                  <div className="t-PB18 t-PR">
                    <Box className={this.state.data.required == '1'?"t-FC3 t-FS16 t-PB12 dd-required" : "t-FC3 t-FS16 t-PB12"}>
                      <HBox >
                        <b>{this.props.keyNo+1}. </b>
                        <b dangerouslySetInnerHTML={{__html:this.state.data.name}}></b>
                        <span style={{alignSelf: "flex-end"}} className="t-FCddfontblue-40">{topicTypeName}</span>
                      </HBox>
                    </Box>
                    {this.state.loading? 
                      <Upload 
                        fileSizeLimit={this.state.data.maxMb} 
                        fileAllSizeLimit={this.state.data.fileAllMb} 
                        extensions={this.state.data.extensions} 
                        canAdd={this.state.data.status == '1' ? false : true} 
                        canDel={this.state.data.status == '1' ? false : true} 
                        initList={this.state.imgList} 
                        dir="questionnaire"  
                        limitNo={this.state.data.limitNo} 
                        onChange={this.uploadFile.bind(this)} />
                    :""}
                    <Box className="t-FCddfontblue-60 t-PT10 t-PB12 t-WB">文件支持格式：{this.state.data.extensions}，最多上传{this.state.data.limitNo}个文件，单个文件大小不超过{this.state.data.maxMb}M。</Box>
                  </div>
                  : this.state.data.topicType == 'scale' ?
                    <div className="t-PB18 t-PR">
                      <Box className={this.state.data.required == '1'?"t-FC3 t-FS16 t-PB12 dd-required" : "t-FC3 t-FS16 t-PB12"}>
                        <HBox >
                          <b>{this.props.keyNo+1}. </b>
                          <b dangerouslySetInnerHTML={{__html:this.state.data.name}}></b>
                          <span style={{alignSelf: "flex-end"}} className="t-FCddfontblue-40">{topicTypeName}</span>
                        </HBox>
                      </Box>
                      {
                          this.state.data.list.map(function(item,j){
                            if(item.type == '3'){
                              return(
                                <div key={j}>
                                  <Rate
                                    className="rate-ques-star dd-ques-star"
                                    total={item.list.length}
                                    size="normal"
                                    scoreTips={item.nameList}
                                    score={item.itemNo}
                                    readOnly={item.status == '1' ? true : false}
                                    onChange={(value) => { t.changeScale(value); }}
                                  />
                                </div>
                              )
                            }else{
                                var newlist = [];
                                for(var i = 0;i<item.list.length;i++){
                                  var param={};
                                  if(parseInt(item.itemNo)-1==i){
                                    param.checked = true;
                                  }else{
                                    param.checked = false;
                                  }
                                  param.text = item.list[i].name;
                                  newlist.push(param);
                                }
                                return (
                                    <RateNew
                                      total={item.list.length}
                                      keyNo={item.keyNo}
                                      type={item.type}
                                      score={newlist}
                                      readOnly={item.status == '1' ? true : false}
                                      onChange={(value) => { t.changeScale(value); }}
                                    />
                                )
                            }
                          })
                        }
                    </div>
                    : this.state.data.topicType == 'mulscale' ?
                      <div className="t-PB18 t-PR">
                        <Box className={this.state.data.required == '1'?"t-FC3 t-FS16 t-PB12 dd-required" : "t-FC3 t-FS16 t-PB12"}>
                          <HBox >
                            <b>{this.props.keyNo+1}. </b>
                            <b dangerouslySetInnerHTML={{__html:this.state.data.name}}></b>
                            <span style={{alignSelf: "flex-end"}} className="t-FCddfontblue-40">{topicTypeName}</span>
                          </HBox>
                        </Box>
                        {
                          this.state.data.type=='3'?
                            this.state.data.answer.map(function (item, j) {
                              var arr = [];
                              for(let i=0;i<item.list.length;i++){
                                arr.push(item.list[i].childOption);
                              }
                              return (
                                <div key={j}>
                                  <Box className="t-PB2 t-WB t-FS16">
                                    {item.name}
                                  </Box>
                                  <div style={{flex: 1}}>
                                    <Rate
                                      className="rate-ques-star dd-ques-star"
                                      total={item.list.length}
                                      size="normal"
                                      scoreTips={arr}
                                      score={item.itemNo}
                                      readOnly={item.status == '1' ? true : false}
                                      onChange={(value) => { t.changeMulScale(j,value); }}
                                    />
                                  </div>
                                </div>
                              )
                            })
                          :
                          <MulscaleRate 
                            readOnly={this.state.data.readOnly == '1' ? true : false}
                            answer={this.state.data.answer}
                            onChange={(no,value) => { t.changeMulScale(no,value); }}/>
                      }
                      </div>
                      : this.state.data.topicType == 'illustrate' ?
                        <div className="t-PB18 t-PR">
                          <Box className="t-FC3 t-FS16 t-PB12">
                            <p dangerouslySetInnerHTML={{__html:this.state.data.name}}></p>
                          </Box>
                        </div>
                        :<div style={display}></div>
        }
      </div>

    )
  }
}

